<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>折线报表</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />

        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">

        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script src="js/echarts.min.js"></script>


    </head>
    <body>
    <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">统计页面</a>
                <a>
                    <cite>折线报表</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">




                    <div class="layui-card">

                        <div class="layui-card-body ">
                                地点:<select id="select_address" style="width: 150px;height: 20px">
                                         <option value="0">请选择</option>
                                    </select>

                           &nbsp;&nbsp;&nbsp;&nbsp; 开始日期:&nbsp; <input type="date" id="searchDate_start" style="height: 20px">
                                结束日期:&nbsp; <input type="date" id="searchDate_end" style="height: 20px">

                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit="" lay-filter="sreach" onclick="searchChart('max')">
                                    <i class="layui-icon">&#xe615;按小时统计</i></button>
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit="" lay-filter="sreach1" onclick="searchChartDay()" >
                                    <i class="layui-icon">&#xe615;按天统计</i></button>
                            </div>

<!--                            <button type="button" class="layui-btn"  onclick="searchChart('max')">查找</button>-->
<!--                            <button type="button" class="layui-btn"  onclick="searchChart('day')">查找每天的最大值</button>-->
<!--                            <button type="button" class="layui-btn"  onclick="searchChart('avg')">查找平均值</button>-->
<!--                            <br/>-->
                            <button type="button" class="layui-btn"  onclick="searchChart('max_export')">
                                <i class="layui-icon-export">&#xe60c;导出</i></button>
<!--                            <button type="button" class="layui-btn"  onclick="searchChart('avg_export')">导出平均值</button>-->
<!--                            <a onclick="xadmin.open('./sensorChartDay.html')" style="text-decoration:underline;">查看按天统计</a>-->
                   <br>
                            <span style="color: #ff5722;">注：统计值为每小时最大值,出现负数时表示设备断线</span>
                        </div>

                        <div class="layui-card-body ">
                            <div id="main_CH4" style="width: 1200px;height:300px"></div>
                            <div id="main_CO2" style="width: 1200px;height:300px;"></div>
                            <div id="main_CO" style="width: 1200px;height:300px;"></div>
                            <div id="main_temperature" style="width: 1200px;height:300px;"></div>
                            <div id="main_O2" style="width: 1200px;height:300px;"></div>
                            <div id="main_humidity" style="width: 1200px;height:300px;"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--         <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="data/sensor.js"></script>
        <script type="text/javascript" src="js/laydate/laydate.js"></script>
        <script type="text/javascript">
        //绑定数据源呈现折线图
         //一氧化碳警戒线

         let MarkLint_CH4={   //添加警戒线
            symbol:"none",               //去掉警戒线最后面的箭头
            name:"警戒线",
            silent:true,
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线",
                color:"red",
                fontSize:14
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"red"
                },
                name: '警戒线',
                yAxis: 1
            }]
        }
         let MarkLint_CO2={   //添加警戒线
             symbol:"none",               //去掉警戒线最后面的箭头
             name:"警戒线",
             silent:true,
             label:{
                 position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                 formatter: "警戒线",
                 color:"red",
                 fontSize:14
             },
             data : [{
                 silent:false,             //鼠标悬停事件  true没有，false有
                 lineStyle:{               //警戒线的样式  ，虚实  颜色
                     type:"solid",
                     color:"red"
                 },
                 name: '警戒线',
                 yAxis: 1
             }]
         }
         let MarkLint_CO= {   //添加警戒线
            symbol:"none",               //去掉警戒线最后面的箭头
            name:"警戒线",
            silent:true,
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线",
                color:"red",
                fontSize:14
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"red"
                },
                name: '警戒线',
                yAxis: 30
            }]
        }
         let MarkLint_T= {   //添加警戒线
            symbol:"none",               //去掉警戒线最后面的箭头
            name:"警戒线",
            silent:true,
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线",
                color:"red",
                fontSize:14
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"red"
                },
                name: '警戒线',
                yAxis: 40
            }]
        }
         let MarkLint_O2= {   //添加警戒线
            symbol:"none",               //去掉警戒线最后面的箭头
            name:"警戒线",
            silent:true,
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线",
                color:"red",
                fontSize:14
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"red"
                },
                name: '警戒线',
                yAxis: 40
            }]
        }
         let MarkLint_H= {   //添加警戒线
            symbol:"none",               //去掉警戒线最后面的箭头
            name:"警戒线",
            silent:true,
            label:{
                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "警戒线",
                color:"red",
                fontSize:14
            },
            data : [{
                silent:false,             //鼠标悬停事件  true没有，false有
                lineStyle:{               //警戒线的样式  ，虚实  颜色
                    type:"solid",
                    color:"red"
                },
                name: '警戒线',
                yAxis: 40
            }]
        }
         //线条颜色
         let ItemStyle={
                 normal : {
                     lineStyle:{
                         color:'#0f985a'
                     }
                 }
         }

         let SEARCHTYPEINFO='';

         $(function () {
             getMaxSetting(); //初始化警戒线数值
             initSelectData();//初始化选择列表
             searchChart("max");
         })

         //markline 警戒线，标志线
         function  getMaxSetting() {
             dataSensor=sensorServer.getMaxSetting({"page":1,"rows":1000});
             if (dataSensor.data!=null&&dataSensor.data!=undefined){
                 MarkLint_CH4.label.formatter="警"+dataSensor.data[0].ch4;
                 MarkLint_CH4.data[0].yAxis=dataSensor.data[0].ch4;

                 MarkLint_CO.label.formatter="警"+dataSensor.data[0].co;
                 MarkLint_CO.data[0].yAxis=dataSensor.data[0].co;

                 MarkLint_CO2.label.formatter="警"+dataSensor.data[0].co2;
                 MarkLint_CO2.data[0].yAxis=dataSensor.data[0].co2;

                 MarkLint_T.label.formatter="警"+dataSensor.data[0].temperature;
                 MarkLint_T.data[0].yAxis=dataSensor.data[0].temperature;

                 MarkLint_O2.label.formatter="警"+dataSensor.data[0].o2;
                 MarkLint_O2.data[0].yAxis=dataSensor.data[0].o2;

                 MarkLint_H.label.formatter="警"+dataSensor.data[0].humidity;
                 MarkLint_H.data[0].yAxis=dataSensor.data[0].humidity;
             }
             return dataSensor;
         }

        function  initSelectData() {
            var dataSensor=sensorServer.getSensorList({"page":1,"rows":1000});
            if (dataSensor!=null) {
                let optionList="";
                for(let i=0;i<dataSensor.data.length;i++){
                     optionList+="<option value='"+dataSensor.data[i].deviceid+"'>"+dataSensor.data[i].devicelocation+"-"+dataSensor.data[i].deviceid+"</option>";
                }
                $("#select_address").append(optionList);
            }
        }

        function  searchChartDay() {
            xadmin.open('按天统计','./sensorChartDay.html');
        }

          //搜索
        var currentAddressName="";
        function searchChart(searchTypeInfo) {
            var startDay=$("#searchDate_start").val();
            var endDay=$("#searchDate_end").val();
            if(startDay.substr(0,7)!=endDay.substr(0,7)){
                //alert("不允许跨月访问！");
                //return;
            }
            var deviceId=$("#select_address").val();

            if($("#select_address").find("option:selected").text()!="请选择")
            {
                currentAddressName=$("#select_address").find("option:selected").text();
            }else{
                currentAddressName="";
            }
            var resultData=null;
            if(searchTypeInfo=='max_export'||searchTypeInfo=='avg_export'){
                let paramsStr="page=1&rows=1000&deviceId="+deviceId+"&startDay="+startDay+"&endDay="+endDay+"&type="+searchTypeInfo;
                sensorServer.GetExport(paramsStr);
                return;
            }
            if(searchTypeInfo=='max')
            {
                SEARCHTYPEINFO='max';
                resultData=sensorServer.getSensorDataListByHour({"page":1,"rows":1000,"deviceId":deviceId,"startDay":startDay,"endDay":endDay});
            }

            if(searchTypeInfo=='day')
            {
                SEARCHTYPEINFO='day';
                resultData=sensorServer.getSensorDataListByHour({"page":1,"rows":1000,"deviceId":deviceId,"startDay":startDay,"endDay":endDay});
            }


            if(searchTypeInfo=='avg')
            {
                SEARCHTYPEINFO='avg';
                resultData=sensorServer.getSensorDataListByHourAVG({"page":1,"rows":1000,"deviceId":deviceId,"startDay":startDay,"endDay":endDay});
            }

            initChartData_Ch4(resultData);
            initChartData_CO2(resultData);
            initChartData_CO(resultData);
            initChartData_temperature(resultData);
            initChartData_O2(resultData);
            initChartData_humidity(resultData);


        }

          function  yDataInfo(name,type,stack,data,barWidth,markline,itemStyle,smooth) {
            this.name=name;
            this.type=type;
            this.stack=stack;
            this.data=data;
            this.barWidth=barWidth;
            this.markLine=markline;
            this.itemStyle=itemStyle;
            this.smooth=smooth;
         }

          //初始化第一个表格
          function  initChartData_Ch4(resultData) {
              var en_qiti_1="CH4";
              var zh_title="甲烷(%)" +"  "+currentAddressName;
              var chartDiv=document.getElementById('main_CH4');
              drawChart(resultData,en_qiti_1,zh_title,chartDiv);
         }

          //初始化第二个表格
          function  initChartData2(resultData) {
            var xData=new Array(resultData.data.length);
            for (var i=0;i<resultData.data.length;i++)
            {
                xData[i]=resultData.data[i].hour+"h";
            }

            var yLineHeader=["T","humidity","O2"];
            var yDataList=new Array(yLineHeader.length);


            var infoT=new yDataInfo();
            infoT=getDataArr("T",resultData);

            var infoHumidity=new yDataInfo();
            infoHumidity=getDataArr("humidity",resultData);

            var infoO2=new yDataInfo();
            infoO2=getDataArr("O2",resultData);

            var infoCO=new yDataInfo();
            infoCO=getDataArr("CO",resultData);

            yDataList[0]=infoT;
            yDataList[1]=infoHumidity;
            yDataList[2]=infoO2;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main2'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '温度(℃)/湿度(%)/氧气(%)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: yLineHeader//['CO2','Ch4','T','直接访问','搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        }, //区域缩放，区域缩放还原
                        dataView: {
                            readOnly: false
                        }, //数据视图
                        magicType: {
                            type: ['line', 'bar']
                        },  //切换为折线图，切换为柱状图
                        restore: {},  //还原
                        saveAsImage: {}   //保存为图片
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData   // ['0','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series:yDataList,
                smooth: true
                // series: [
                //     {
                //         name:'邮件营销',
                //         type:'line',
                //         stack: '总量',
                //         data:[120, 132, 101, 134, 90, 230,20]
                //     },
                //     {
                //         name:'联盟广告',
                //         type:'line',
                //         stack: '总量',
                //         data:[220, 182, 191, 234, 290, 330, 310]
                //     },
                //     {
                //         name:'视频广告',
                //         type:'line',
                //         stack: '总量',
                //         data:[150, 232, 201, 154, 190, 330, 410]
                //     },
                //     {
                //         name:'直接访问',
                //         type:'line',
                //         stack: '总量',
                //         data:[320, 332, 301, 334, 390, 330, 320]
                //     },
                //     {
                //         name:'搜索引擎',
                //         type:'line',
                //         stack: '总量',
                //         data:[820, 932, 901, 934, 1290, 1330, 1320]
                //     }
                // ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }
        function  initChartData_CO2(resultData) {
            var en_qiti_1="CO2";
            var zh_title="二氧化碳(%)" +"  "+currentAddressName;
            var chartDiv=document.getElementById('main_CO2');
            drawChart(resultData,en_qiti_1,zh_title,chartDiv);
        }
          //初始化第3个表格 CO
        function initChartData_CO(resultData) {
             var en_qiti_1="CO";
             var zh_title="一氧化碳(ppm)" +"  "+currentAddressName;
             var chartDiv=document.getElementById('main_CO');
             drawChart(resultData,en_qiti_1,zh_title,chartDiv);
        }
        function initChartData_temperature(resultData){
            var en_qiti_1="T";
            var zh_title="温度(℃)" +"  "+currentAddressName;
            var chartDiv=document.getElementById('main_temperature');
            drawChart(resultData,en_qiti_1,zh_title,chartDiv);
        }
        function initChartData_O2(resultData){
            var en_qiti_1="O2";
            var zh_title="氧气(%)" +"  "+currentAddressName;
            var chartDiv=document.getElementById('main_O2');
            drawChart(resultData,en_qiti_1,zh_title,chartDiv);
        }
        function initChartData_humidity(resultData){
            var en_qiti_1="humidity";
            var zh_title="湿度(%)" +"  "+currentAddressName;
            var chartDiv=document.getElementById('main_humidity');
            drawChart(resultData,en_qiti_1,zh_title,chartDiv);
        }

        function  drawChart(resultData,en_qiti_1,zh_title,chartDiv) {
            //debugger;
            var xData=new Array(resultData.data.length);
            for (var i=0;i<resultData.data.length;i++)
            {
                xData[i]=resultData.data[i].hour+"h";
            }
            var yLineHeader=[en_qiti_1];
            var yDataList=new Array(yLineHeader.length);

            var infoQit=new yDataInfo();
            infoQit=getDataArr(en_qiti_1,resultData);
            infoQit.itemStyle=ItemStyle;
            yDataList[0]=infoQit;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(chartDiv);

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: zh_title
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: yLineHeader//['CO2','Ch4','T','直接访问','搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        }, //区域缩放，区域缩放还原
                        dataView: {
                            readOnly: false
                        }, //数据视图
                        magicType: {
                            type: ['line', 'bar']
                        },  //切换为折线图，切换为柱状图
                        restore: {},  //还原
                        saveAsImage: {}   //保存为图片
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData   // ['0','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series:yDataList,
                smooth: true
            };
            if(zh_title.indexOf("氧气")>=0){
                option.yAxis.max=21;
                option.yAxis.min=15;
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

          //根据title获取到对应的列的值
          function getDataArr(headerName,resultData){
             var elme=new yDataInfo();
             if (headerName=="CH4") {
                 elme.name = headerName;
                 elme.type = 'line';
                 //elme.stack = '总量';
                 var infoCh4Arr = new Array(resultData.data.length);
                 for (var i = 0; i < resultData.data.length; i++) {
                     if(SEARCHTYPEINFO=="max") {
                         infoCh4Arr[i] = resultData.data[i].maxCh4;
                     }else{
                         infoCh4Arr[i] = resultData.data[i].avgCh4;
                     }
                 }
                 elme.data = infoCh4Arr;
                 elme.markLine=MarkLint_CH4;
             }
             if (headerName=="CO2") {
                 elme.name=headerName;
                 elme.type='line';
                 //elme.stack='总量';
                 var co2Arr=new Array(resultData.data.length);
                 for (var i=0;i<resultData.data.length;i++){
                     // if(SEARCHTYPEINFO=="max") {
                     //     co2Arr[i] = resultData.data[i].maxCO2;
                     // }else{
                     //     co2Arr[i] = resultData.data[i].avgCO2;
                     // }
                     co2Arr[i] = resultData.data[i].maxCo2;
                 }
                 elme.data=co2Arr;
                 elme.markLine=MarkLint_CO2;
             }
             if (headerName=="T") {
                 elme.name = headerName;
                 elme.type = 'line';
                 //elme.stack = '总量';
                 var infoCh4Arr = new Array(resultData.data.length);
                 for (var i = 0; i < resultData.data.length; i++) {
                     if(SEARCHTYPEINFO=="max") {
                         infoCh4Arr[i] = resultData.data[i].maxTemperature;
                     }else{
                         infoCh4Arr[i] = resultData.data[i].avgTemperature;
                     }
                 }
                 elme.data = infoCh4Arr;
                 elme.markLine=MarkLint_T;
             }
             if (headerName=="humidity") {
                  elme.name=headerName;
                  elme.type='line';
                 //elme.stack='总量';                    elme.barWidth=10;
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      if(SEARCHTYPEINFO=='max')
                      {
                          arrValue[i]=resultData.data[i].maxHumidity;
                      }else{
                          arrValue[i]=resultData.data[i].avgHumidity;
                      }
                  }
                  elme.data=arrValue;
                  elme.markLine=MarkLint_H;
              }
             if (headerName=="CO") {
                  elme.name=headerName;
                  elme.type='line';
                 //elme.stack='总量';
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      // if(SEARCHTYPEINFO=='max') {
                          // if (arrValue[i] = resultData.data[i].maxCO != null) {
                          //     arrValue[i] = resultData.data[i].maxCO;
                          // } else {
                          //     arrValue[i] = 0;
                          // }
                      // }else{
                      //     if (arrValue[i] = resultData.data[i].avgCO != null) {
                      //         arrValue[i] = resultData.data[i].avgCO;
                      //     } else {
                      //         arrValue[i] = 0;
                      //     }
                      // }
                      arrValue[i] = resultData.data[i].maxCo;
                  }
                  elme.data=arrValue;
                  elme.markLine=MarkLint_CO;//设置警戒线
              }
             if (headerName=="O2") {
                  elme.name=headerName;
                  elme.type='line';
                  //elme.stack='总量';
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      if(SEARCHTYPEINFO=="max") {
                          if (resultData.data[i].minO2 != null) {
                              arrValue[i] = resultData.data[i].minO2;
                          } else {
                              arrValue[i] = 0;
                          }
                      }else{
                          if (resultData.data[i].avgO2 != null) {
                              arrValue[i] = resultData.data[i].avgO2;
                          } else {
                              arrValue[i] = 0;
                          }
                      }
                  }
                  elme.data=arrValue;
                  elme.markLine=MarkLint_O2;
              }
              elme.smooth=true;
             return elme;
         }
        //字符串转base64
        function encode(str){
// 对字符串进行编码
            var encode = encodeURI(str);
// 对编码的字符串转化base64
            var base64 = btoa(encode);
            return base64;
        }
    </script>
    </body>
</html>
